<template>

    <div class="manage_page fillcontain">
        <header class="el-header" style="height: 30px; background-color: rgb(58, 59, 59);"></header>
        <el-row style="height: 100%;">
            <el-col :span="4" style="min-height: 100%; background-color: #324057;">
                <!--router -->
                <el-menu :default-openeds="['manage']"  @select="selectHandle" :default-active="defaultActive" style="min-height: 100%; " theme="dark">
                    <el-menu-item index="uzye"><i class="el-icon-menu"></i>首页</el-menu-item>
                    <el-submenu  index="manage">
                        <template slot="title"><i class="el-icon-document"></i>会员信息管理</template>
                        <el-menu-item index="usermanage">客户管理</el-menu-item>
                        <el-menu-item index="scoremanage">积分管理</el-menu-item>
                        <el-menu-item index="giftmanage">赠品管理</el-menu-item>
                        <el-menu-item index="updatePwd">修改密码</el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-col>
            <el-col :span="20" style="height: 100%;overflow: auto;">
                <div class="app-wrap">
                    <div class="fillcontain">
                        <head-top></head-top>
                        <el-tabs
                            v-model="activeIndex"
                            type="border-card"
                            @tab-click="tabClick"
                            v-if="options.length"
                        >
                            <el-tab-pane
                                :key="item.rulename"
                                v-for="(item, index) in options"
                                :label="item.rulename"
                                :name="item.rulepath">
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div class="content-wrap">
                        <router-view/>
                    </div>
                </div>
                <!--<keep-alive>
                    <router-view></router-view>
                </keep-alive>-->
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
    import {mapActions, mapState, mapMutations, mapGetters} from 'vuex'
    import {getRuleMenu} from '@/api/getData'

    export default {
        mounted() {
            if (this.optionsMenu == "" || this.optionsMenu == null || this.optionsMenu == undefined) {
                if (this.adminInfo == null) {
                    var json = localStorage.getItem("adminInfo");
                    console.info(json)
                    var info = JSON.parse(json);
                    //var rulesjson="{\"mySchoolInfo\":[{\"id\":31,\"rulepath\":\"/mySchoolInfo\",\"rulename\":\"修改密码\",\"menu\":\"mySchoolInfo\"}],\"usermanage\":[{\"id\":1,\"rulepath\":\"/userList\",\"rulename\":\"学生信息列表\",\"menu\":\"usermanage\"},{\"id\":2,\"rulepath\":\"/addStudent/1\",\"rulename\":\"新增潜在生\",\"menu\":\"usermanage\"},{\"id\":3,\"rulepath\":\"/addStudent/2\",\"rulename\":\"新增试听生\",\"menu\":\"usermanage\"},{\"id\":4,\"rulepath\":\"/addStudent/3\",\"rulename\":\"新增正式生\",\"menu\":\"usermanage\"},{\"id\":5,\"rulepath\":\"/addStudent/4\",\"rulename\":\"新增短期生\",\"menu\":\"usermanage\"}]]}";
                    this.saveAdminInfo(info);
                    //this.setMenuRles(JSON.parse(rulesjson));
                }
            }
            if (this.options == "" || this.options == null || this.options == undefined) {
                var json = localStorage.getItem("options");

                if (json != null) {
                    var list = JSON.parse(json);
                    this.add_manytabs(list);
                }
            }

        },
        components: {
            headTop,
        },
        computed: {
            ...mapGetters(['set_active_index', 'optionsMenu', 'userinfo', 'adminInfo']),
            options() {
                return this.$store.state.options;
            },
            defaultActive: function () {
                return this.$route.path.replace('/', '');
            }
        },
        watch: {
            '$route'(to) {
            }
        },


        methods: {
            ...mapMutations(['add_manytabs', 'setMenuRles', 'saveAdminInfo']),

            async getMenuRule(eid) {

                const res = await getRuleMenu({"data": {id: eid}});
                if (res.success == true) {
                    this.setMenuRles(res.data);
                }
            },
            selectHandle(key, keyPath) {
                var list = this.optionsMenu[key];
                if (list != null) {
                    this.add_manytabs(list);
                    var first = list[0].rulepath;
                    this.activeIndex = first;
                    this.$router.push({path: first})
                }
                else {
                    this.$router.push({path: '/norule'});
                    alert("您没有该菜单权限!");
                    return;
                }
            },
            tabClick(tab) {
                let path = this.activeIndex;
                this.$router.push({path: path});
            },
        }
    }
</script>


<style lang="less" scoped>
    @import '../style/mixin';

    .manage_page {

    }

    .el-menu-item, .el-submenu__title {
        height: 40px;
        line-height: 40px;
    }

    .el-tabs__content {
        padding-top: 2px;
        padding-right: 2px;
        padding-bottom: 2px;
        padding-left: 2px;
    }


</style>
